<template>
    <div class="" style="width:22vw;height:100vh;color:white;background-color:rgba(3,3,3,0.5);">
        <div style="padding-top:10vh;">
            <div style="margin-left:10px;"><i class="el-icon-s-shop" style="color:#409EFF;"></i><span style="margin-left:5px;font-size:14px;">平台概况</span></div>
            <div style="display:flex;flex-wrap:wrap;font-size:12px;">
                <div class="platform" v-if="flag">
                    <div><i class="el-icon-s-data"></i></div>
                    <div style="margin-left:10px;">
                        <div>企业数量</div>
                        <div><span style="color:#F49B4E">{{enterpriseNumber}}</span>家</div>
                    </div>
                </div>
                <div class="platform" v-if="flag">
                    <div><i class="el-icon-s-check"></i></div>
                    <div style="margin-left:10px;">
                        <div>用户数量</div>
                        <div><span style="color:#F49B4E">{{userNUmber}}</span>个</div>
                    </div>
                </div>
                <div class="platform">
                    <div><i class="el-icon-s-help"></i></div>
                    <div style="margin-left:10px;">
                        <div>种植面积</div>
                        <div><span style="color:#F49B4E">{{plantArea}}</span>亩</div>
                    </div>
                </div>
                <div class="platform">
                    <div><i class="el-icon-s-grid"></i></div>
                    <div style="margin-left:10px;">
                        <div>地块数量</div>
                        <div><span style="color:#F49B4E">{{massifNumbe}}</span>块</div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div style="margin-left:10px;margin-top:20px;"><i class="el-icon-s-shop" style="color:#409EFF;"></i><span style="margin-left:5px;font-size:14px;">生产概况</span></div>
            <div>
                <div id="coding" style="width:300px;height:180px;"></div>
            </div>
        </div>

        <div>
            <div style="margin-left:10px;"><i class="el-icon-s-shop" style="color:#409EFF;"></i><span style="margin-left:5px;font-size:14px;">实时动态</span></div>
            <div>
                <div style="width:300px;height:180px;">
                    <div v-for="(item,index) in realTime" :key="index" style="display:flex;margin:5px;border-radius:4px;font-size:12px;padding:5px;">
                    <div style="flex: 1.5;margin-left:5px;">{{item.supplyName}}</div>
                    <div style="flex: 1">{{item.source}}</div>
                    <div style="flex: 1">{{item.type}}</div>
                    <div style="flex: 1.5">{{item.spec}}{{item.specUnits}}</div>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios'
export default {
    data() {
        return {
			monthData:[],
            enterpriseNumber: '', //企业数量
            userNUmber: '',   //用户数量
            plantArea: '',    //种植面积
            massifNumbe: '',  //地块数量
            realTime: [],   //实时动态
            yieldData: [],  //饼形图
            flag: true
        };
    },
    computed: {

    },
    mounted() {
        var userTypes = JSON.parse(localStorage.getItem('userInfo'))
        if(userTypes.userInfo.userType == "GOV"){
            this.flag = true
        }else{
            this.flag = false
        }
        this.init()
    },
    methods: {
        init() {
            //企业数量
            let enterpriseData = {
                companyId: ''
            }
            enterpriseData.companyId = localStorage.getItem('companyId')
            // axios.post("http://192.168.0.148:8880/usercenter/company/firm",enterpriseData).then((res) =>{
            axios.post("http://grove.cpzsyun.com:81/api/usercenter/company/firm",enterpriseData).then((res) =>{
                this.enterpriseNumber = res.data.data
            })
            //用户数量
            // axios.post("http://192.168.0.148:8880/usercenter/user/numUser",enterpriseData).then((res) =>{
            axios.post("http://grove.cpzsyun.com:81/api/usercenter/user/numUser",enterpriseData).then((res) =>{
                this.userNUmber = res.data.data
            })
            //所有种植面积
            // axios.post("http://192.168.0.148:8880/plant/plant/areas").then((res) =>{
            axios.post("http://grove.cpzsyun.com:81/api/plant/plant/areas").then((res) =>{
                this.plantArea = res.data.data
            })
            //所有地块数量
            // axios.post("http://192.168.0.148:8880/plant/soil/soils").then((res) =>{
            axios.post("http://grove.cpzsyun.com:81/api/plant/soil/soils").then((res) =>{
                this.massifNumbe = res.data.data
            })

            //实时动态
            // axios.post("http://192.168.0.148:8880/plant/inputs/dynamic").then((res) =>{
            axios.post("http://grove.cpzsyun.com:81/api/plant/inputs/dynamic").then((res) =>{
                this.realTime = res.data.rows
            })

            // 生产概况饼形图
            // axios.post("http://192.168.0.148:8880/plant/plant/yield").then((res) =>{
            axios.post("http://grove.cpzsyun.com:81/api/plant/plant/yield").then((res) =>{
                this.yieldData = res.data.data
                var keys=[];
                var values=[];
                var obj = this.yieldData
                for(var key in obj){
                    keys.push(key);
                    values.push(obj[key]);
                }
                let bingData=[]
                for(var a=0;a<keys.length;a++){
                    var object = {}
                    object.name = keys[a]
                    object.value = values[a]
                    bingData.push(object)
                }
                // console.log(bingData,'1515')

            let myEchart = echarts.init(document.getElementById("coding"));
            let option = {
                title:{
                    // text:"赋码量",
                textStyle: {
                    color:['white'],
                    fontSize: 14,

                },
                // top: 10,
            },
            // tooltip:{},
            legend:{
                bottom: 20,
                left: 'center',
                textStyle: {
                    color: 'white',
                },
                data: keys,
            },
            xAxis:{
                // data: this.monthData,
                // axisLabel: {
                    //     show: false,
                //     color: ['white'],
                //     fontSize: 10,
                //     interval: 0
                // },
                axisLine: {
                    show: false
                }
            },
            yAxis:{
                // axisLabel: {
                    //     color: ['white'],
                //     fontSize: 10,
                // },
                axisLine: {
                    show: false
                }
            },
            series:[{
                // name:'赋码量',
                type:"pie",
                radius: '50%',
                center: ['40%', '35%'],
                // clockwise: true,
                label:{
                    show: true,
                    position: 'outside',
                    fontSize: 10,
                    formatter: function(paramss) {
                        const percent = paramss.percent + '%'
                        return [`${percent}`].join('\n')
                    },
                    // edgeDistance: '10%',
                },
                labelLine: {
                    length: 2,
                    length2: 5
                },
                roseType: 'radius',
                data:bingData
            }]
            };
            myEchart.setOption(option);
        })
        },
    },
	created(){

        }
};
</script>
<style scoped>
	.platform{
        width:50%;
        text-align:center;
        margin:8px 0;
        display:flex;
        justify-content: center;
        align-items: center;
    }
</style>
